<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/cssreset.css">
    <link rel="stylesheet" href="./css/index.css">
    <link rel="stylesheet" href="./css//common.css">
    <link rel="stylesheet" type="text/css" href="./iconfont/iconfont.css">
</head>

<body>
    <!-- 右侧导航栏 -->
    <section class="rightNav">
        <ul>
            <!-- <i class="iconfont icon-xxx"></i> -->
            <!-- .icon-jingxuan -->
            <li>
                <span class="iconfont icon-zhanghao"></span><span>账号</span>
            </li>
            <li>
                <p class="iconfont icon-gouwudaizi_"></p><span>购物</span>
            </li>
            <li>
                <div class="div iconfont icon-youhuiquan">
                    <div class="float">优惠券</div>
                </div>
            </li>
            <li>
                <div class="div iconfont icon-shoucang">
                    <div class="float">关注</div>
                </div>


            </li>
            <li>
                <i class="div iconfont icon-jingxuan">
                    <div class="float">收藏</div>
                </i>
            </li>
            <li><span class="div icon-zuji iconfont">
                    <div class="float">历史足迹</div>

                </span></li>
            <li class="absolute2">
                <span class="div iconfont icon-qianbi ">
                    <div class="float">记起来</div>
                </span>
            </li>
            <li class="absolute">
                <span class="div iconfont icon-dingbu ">
                    <div class="float">折叠</div>
                </span>
            </li>
        </ul>
    </section>
    <!-- 顶部导航栏 -->
    <section class="topNav">
        <section class="content_center top">
            <div class="option2">
                <span>广东</span>
                <img src="./images/下拉.png" alt="">
            </div>
            <!-- <select name="" id="" class="option">
                <option value="广东">广东</option>
                <option value="广东">湖南</option>
                <option value="广东">深圳</option>
                <option value="广东">上海</option>
                <option value="广东">北京</option>
            </select> -->
            <ul>
                <li>请登录</li>
                <li>注册</li>
                <li>我的订单</li>
                <li class="option2">我的特卖
                    <img src="./images/下拉.png" alt="">
                </li>
                <li>会员俱乐部</li>
                <li class="option2">客户服务
                    <img src="./images/下拉.png" alt="">
                </li>
                <li>
                    <img class="option3" src="./images/手机.png" alt="">手机版
                </li>
                <li class="option2">更多
                    <img src="./images/下拉.png" alt="">
                </li>
            </ul>
        </section>
    </section>
    <!-- 头部 -->
    <section class="">
        <section class="content_center header">
            <h1>
                <img src="./images/logo.png" alt="">
            </h1>
            <ul>
                <li><img src="./images/img1.png" alt=""></li>
                <li><img src="./images/img2.png" alt=""></li>
                <li><img src="./images/img3.png" alt=""></li>
                <li class="color">|</li>
                <li class="pos">
                    <img class="img" src="./images/img4.png" alt="">
                    <div class="post"><span>1</span></div>
                    <span class="span">我的购物袋</span>
                </li>
            </ul>
        </section>
    </section>
    <!-- 导航栏 -->
    <section class="all  swipe">
        <div class="content_center div">
            <ul class="ul">
                <li>首页</li>
                <li>唯品国际</li>
                <li>母婴</li>
                <li>家具家电</li>
                <li>男士</li>
                <li>美妆</li>
                <li>生活潮汕</li>
                <li>金融</li>
                <li class="option4">更多
                    <img src="./images/下拉.png" alt="">
                </li>
            </ul>
            <ul class="ul2">
                <span class="iconfont icon-yugao icon-fenlei1"></span>
                <li>分类</li>
                <li>
                    <span class="iconfont icon-yugao"></span>
                    预告
                </li>
            </ul>
        </div>
    </section>
    <!-- 轮播图 -->
    <section>
        <div class="content_center2">
            <div class="bgUl">
                <div class="border">
                    <ul class="content_center ul">
                        <li>
                            <!-- <img id="img" src="./images//banner.jpg" alt=""> -->
                            <img id="img" src="./img/banner(1).jpg" alt="">
                        </li>
                    </ul>
                    <ul id="btnS" class="title content_center">
                        <li value="1">UA品牌 全场6折起</li>
                        <li value="2">热辣沙漠,最高慢196减40</li>
                        <li value="3" class="active">母婴冰点盛宴</li>
                        <li value="4">宝姿VIP大牌日 立抢红包</li>
                    </ul>
                </div>

            </div>
        </div>
    </section>
    <!-- 热销 -->
    <section class="hot">
        <div class="content_center bg">
            <ul>
                <li class="li1">
                    <div class="div1"><img src="./images/icon.png" alt=""></div>
                </li>
                <li class="li2">
                    <div class="div2"><img src="./images/icon.png" alt=""></div>
                </li>
                <li class="li3">
                    <div class="div3"><img src="./images/icon.png" alt=""></div>
                </li>
            </ul>
        </div>
    </section>
    <!-- 新人优选 -->
    <section class="new">
        <div class="content_center">
            <h1><span>新人优选</span> 好货专区</h1>
            <ul class="newImg">
                <li><img src="./images/new1.jpg" alt=""><span>美妆馆</span></li>
                <li><img src="./images/new2.jpg" alt=""><span>鞋包馆</span></li>
                <li><img src="./images/new3.jpg" alt=""><span>男装馆</span></li>
                <li><img src="./images/new4.jpg" alt=""><span>体用馆</span></li>
                <li><img src="./images/new5.jpg" alt=""><span>母婴馆</span></li>
                <li><img src="./images/new6.jpg" alt=""><span>国家馆</span></li>
                <li><img src="./images/new7.jpg" alt=""><span>人气零售</span></li>
                <li><img src="./images/new8.jpg" alt="">更多分类</li>
            </ul>
        </div>
    </section>
    <!-- 新人展示图 -->
    <section class="newImgShow content_center">
        <div class="left">
            <ul>
                <div>
                    <img src="./images//clothes01.jpg" alt="">
                    <span>连衣裙</span>
                </div>
                <div>
                    <img src="./images//clothes02.jpg" alt="">
                    <span>省心套装</span>
                </div>
                <div>
                    <img src="./images//clothes03.jpg" alt="">
                    <span>半身裙</span>
                </div>
                <div>
                    <img src="./images//clothes04.jpg" alt="">
                    <span>百搭T恤</span>
                </div>
            </ul>
        </div>
        <div class="right">
            <ul>
                <div>
                    <img src="./images/beauty01.jpg" alt="">
                    <span>人气彩妆</span>
                </div>
                <div>
                    <img src="./images/beauty02.jpg" alt="">
                    <span>省心套装</span>
                </div>
                <div>
                    <img src="./images/beauty03.jpg" alt="">
                    <span>口碑面膜</span>
                </div>
                <div>
                    <img src="./images/beauty04.jpg" alt="">
                    <span>清爽水乳</span>
                </div>
            </ul>
        </div>
    </section>
    <!-- 左侧导航栏 -->
    <section>
        <nav class="leftNav">
            <ul>
                <li class="active">
                    <a href="#newDay">
                        <span class="icon-jingxuan iconfont "></span>
                        <span>精选</span>
                    </a>
                </li>
                <li>
                    <a href="#produce">
                        <span class="icon-nvzhuang iconfont "></span>
                        <span>女装</span>
                    </a>

                </li>
                <li>
                    <a href="#produce2">
                        <span class="icon-xiebao iconfont "></span>
                        <span>鞋包</span>
                    </a>
                </li>
                <li>
                    <span class="icon-nanshi iconfont "></span>
                    <span>男士</span>
                </li>
                <li>
                    <span class="icon-yundong iconfont "></span>
                    <span>饰品</span>
                </li>
                <li>
                    <span class="icon-shipin iconfont "></span>
                    <span>美妆</span>
                </li>
                <li>
                    <span class="icon-tongzhuangmuying iconfont "></span>
                    <span>母婴</span>
                </li>
                <li>
                    <span class="icon-jujia iconfont "></span>
                    <span>居家</span>
                </li>
                <li>
                    <span class="icon-guoji iconfont "></span>
                    <span>国际</span>
                </li>
                <li>
                    <span class="icon-shuiguo iconfont "></span>
                    <span>生活</span>
                </li>
                <li class="none">
                    <span class="icon-yugao iconfont "></span>
                    <span>预估</span>
                </li>
            </ul>
        </nav>
    </section>
    <!-- 新特卖 -->
    <section class="content_center" id="newDay">
        <div class="newDay">
            <!-- <h1><span>新特卖</span>每日早10晚8上新</h1> -->
            <h1><img src="./images/today_DDp.png" alt=""></h1>
            <h3>ToDAYS DEALS BRAND</h3>
            <ul>
                <li class="lis1">
                    <div class="mask1"></div>
                    <!-- <div class="write">
                        <img src="./images/today2_logo.png" alt="">
                        <h2>醉意新韵 至美绽放</h2>
                        <h4>购物即享折上8.5折优惠</h4>
                    </div> -->

                    <div class="bg1">
                        <ul class="top">
                            <div>
                                <img src="./images/today_list1.jpg" alt="">
                                <span>¥1198</span>
                            </div>
                            <div>
                                <img src="./images/today_list2.jpg" alt="">
                                <span>¥1148</span>
                            </div>
                            <div>
                                <img src="./images/today_list3.jpg" alt="">
                                <span>¥698</span>
                            </div>
                        </ul>
                        <hr>
                        <div class="bottom">
                            <img src="./images/today1_logo.jpg" alt="">
                            <div class="text">今日专场</div>
                        </div>
                    </div>
                </li>
                <li class="lis2">
                    <div class="mask2"></div>
                    <div class="write">
                        <img src="./images/today2_logo.png" alt="">
                        <h2>醉意新韵 至美绽放</h2>
                        <h4>购物即享折上8.5折优惠</h4>
                    </div>
                    <div class="bg2">
                        <ul class="top">
                            <div>
                                <img src="./images/today_list1.jpg" alt="">
                                <span>¥1198</span>
                            </div>
                            <div>
                                <img src="./images/today_list2.jpg" alt="">
                                <span>¥1148</span>
                            </div>
                            <div>
                                <img src="./images/today_list3.jpg" alt="">
                                <span>¥698</span>
                            </div>
                        </ul>
                        <hr>
                        <div class="bottom">
                            <img src="./images/today1_logo.jpg" alt="">
                            <div class="text">今日专场</div>
                        </div>
                    </div>
                </li>

            </ul>
            <ul>
                <li class="lis2">
                    <div class="mask2"></div>
                    <div class="write">
                        <img src="./images/today2_logo.png" alt="">
                        <h2>醉意新韵 至美绽放</h2>
                        <h4>购物即享折上8.5折优惠</h4>
                    </div>
                    <div class="bg2">
                        <ul class="top">
                            <div>
                                <img src="./images/today_list1.jpg" alt="">
                                <span>¥1198</span>
                            </div>
                            <div>
                                <img src="./images/today_list2.jpg" alt="">
                                <span>¥1148</span>
                            </div>
                            <div>
                                <img src="./images/today_list3.jpg" alt="">
                                <span>¥698</span>
                            </div>
                        </ul>
                        <hr>
                        <div class="bottom">
                            <img src="./images/today1_logo.jpg" alt="">
                            <div class="text">今日专场</div>
                        </div>
                    </div>
                </li>
                <li class="lis1">
                    <div class="mask1"></div>
                    <!-- <div class="write">
                                        <img src="./images/today2_logo.png" alt="">
                                        <h2>醉意新韵 至美绽放</h2>
                                        <h4>购物即享折上8.5折优惠</h4>
                                    </div> -->

                    <div class="bg1">
                        <ul class="top">
                            <div>
                                <img src="./images/today_list1.jpg" alt="">
                                <span>¥1198</span>
                            </div>
                            <div>
                                <img src="./images/today_list2.jpg" alt="">
                                <span>¥1148</span>
                            </div>
                            <div>
                                <img src="./images/today_list3.jpg" alt="">
                                <span>¥698</span>
                            </div>
                        </ul>
                        <hr>
                        <div class="bottom">
                            <img src="./images/today1_logo.jpg" alt="">
                            <div class="text">今日专场</div>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
    </section>
    <!-- 女装品牌 -->
    <section class="content_center produce" id="produce">
        <div class="top">
            <!-- <h1><span>女装</span>品牌</h1> -->
            <h1><img src="./images/woman_2ad.png" alt="" style="position:relative;top: 20px;">
                <h3>全部女装品牌
                    <img src="./images/右箭头.png" alt="">
                </h3>
        </div>
        <hr>
        <ul class="img">
            <li>
                <div>
                    <img src="./images/woman1.jpg" alt="">
                    <div id="pos">
                        <div class="pos">
                            <img src="./images/优惠.png" alt=""> 购物即享折上7折优惠
                        </div>
                    </div>
                    <div class="text">
                        <h1>
                            <span class="big">2.5</span>
                            <span>折起&nbsp;&nbsp;&nbsp;&nbsp;</span>
                            <span class="indent">拉夏贝尔旗下品牌女装专场</span>
                        </h1>
                        <!-- <span class="right">剩18小时</span> -->
                        <div class="right">
                            <img src="./images/倒计时.png" alt="" class="time">
                            <div>剩1天</div>
                        </div>
                    </div>
                </div>
            </li>
            <li><img src="./images/woman2.jpg" alt="">
                <div id="pos">
                    <div class="pos">
                        <img src="./images/优惠.png" alt=""> 满购物满2件即享8.5折，满3件即享8折
                    </div>
                </div>
                <div class="text">
                    <h1>
                        <span class="big">0.5</span>
                        <span>折起&nbsp;&nbsp;&nbsp;&nbsp;</span>
                        <span class="indent">拉夏贝尔旗下品牌女装专场</span>
                    </h1>
                    <!-- <span class="right">剩5天</span> -->
                    <div class="right">
                        <img src="./images/倒计时.png" alt="" class="time">
                        <div>剩5天</div>
                    </div>
                </div>
            </li>
        </ul>
        <ul class="img">
            <li>
                <div>
                    <img src="./images/woman2.jpg" alt="">
                    <div id="pos">
                        <div class="pos">
                            <img src="./images/优惠.png" alt="">购物即享折上7折优惠
                        </div>
                    </div>
                    <div class="text">
                        <h1>
                            <span class="big">1.6</span>
                            <span>折起&nbsp;&nbsp;&nbsp;&nbsp;</span>
                            <span class="indent">拉夏贝尔旗下品牌女装专场</span>
                        </h1>
                        <!-- <span class="right">剩18小时</span> -->
                        <div class="right">
                            <img src="./images/倒计时.png" alt="" class="time">
                            <div>剩1天</div>
                        </div>
                    </div>
                </div>
            </li>
            <li><img src="./images/woman1.jpg" alt="">
                <div id="pos">
                    <div class="pos">
                        <img src="./images/优惠.png" alt=""> 满购物满2件即享8.5折，满3件即享8折
                    </div>
                </div>
                <div class="text">
                    <h1>
                        <span class="big">1.7</span>
                        <span>折起&nbsp;&nbsp;&nbsp;&nbsp;</span>
                        <span class="indent">拉夏贝尔旗下品牌女装专场</span>
                    </h1>
                    <!-- <span class="right">剩5天</span> -->
                    <div class="right">
                        <img src="./images/倒计时.png" alt="" class="time">
                        <div>剩5天</div>
                    </div>
                </div>
            </li>
        </ul>
        <div class="btn">
            <button>逛更多女装品牌
                <img src="./images/右箭头.png" alt="">
            </button>
        </div>
    </section>
    <!-- 长图 -->
    <section class="longImg">
        <div class="content_center centerImg">
            <!-- <img src="./images/fashion_peopel.jpg" alt=""> -->
            <div class="bg">
                <div class="black">
                    <img src="./images/fashion_logo.png" alt="">
                    <span>轻奢大牌 时尚臻品</span>
                    <div class="color">
                        <span>进入频道</span>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- 鞋包品牌 -->
    <!-- 女装品牌 -->
    <section class="content_center produce bottom" id="produce2">
        <div class="top">
            <h1><img src="./images/shoe.png" alt="" style="position:relative;top: 20px;">
                <!-- <span>鞋包</span>品牌</h1> -->
                <h3>全部女装品牌
                    <img src="./images/右箭头.png" alt="">
                </h3>
        </div>
        <hr>
        <ul class="img">
            <li>
                <div>
                    <img src="./images/shoes1.jpg" alt="">

                    <div id="pos">
                        <div class="pos">
                            <img src="./images/优惠.png" alt=""> 满198减40,上不封顶
                        </div>
                    </div>

                    <div class="text">
                        <h1>
                            <span class="big">1.5</span>
                            <span>折起&nbsp;&nbsp;&nbsp;&nbsp;</span>
                            <span class="indent">拉夏贝尔旗下品牌女鞋专场</span>
                        </h1>

                        <div class="right">
                            <img src="./images/倒计时.png" alt="" class="time">
                            <div>剩4天</div>
                        </div>
                    </div>
                </div>
            </li>
            <li><img src="./images/shoes2.jpg" alt="">
                <div id="pos">
                    <div class="pos">
                        <img src="./images/优惠.png" alt=""> 满198减40,上不封顶
                    </div>
                </div>
                <div class="text">
                    <h1>
                        <span class="big">1.4</span>
                        <span>折起&nbsp;&nbsp;&nbsp;&nbsp;</span>
                        <span class="indent">拉夏贝尔旗下品牌女鞋专场</span>
                    </h1>
                    <div class="right">
                        <img src="./images/倒计时.png" alt="" class="time">
                        <div>剩5天</div>
                    </div>
                </div>
            </li>
        </ul>
        <ul class="img">
            <li>
                <div>
                    <img src="./images/shoes2.jpg" alt="">
                    <div id="pos">
                        <div class="pos">
                            <img src="./images/优惠.png" alt=""> 满198减40,上不封顶
                        </div>
                    </div>
                    <div class="text">
                        <h1>
                            <span class="big">1</span>
                            <span>折起&nbsp;&nbsp;&nbsp;&nbsp;</span>
                            <span class="indent">拉夏贝尔旗下品牌皮具专场</span>
                        </h1>
                        <div class="right">
                            <img src="./images/倒计时.png" alt="" class="time">
                            <div>剩3天</div>
                        </div>
                    </div>
                </div>
            </li>
            <li><img src="./images/shoes1.jpg" alt="">
                <div id="pos">
                    <div class="pos">
                        <img src="./images/优惠.png" alt=""> 满198减40,上不封顶
                    </div>
                </div>
                <div class="text">
                    <h1>
                        <span class="big">1.3</span>
                        <span>折起&nbsp;&nbsp;&nbsp;&nbsp;</span>
                        <span class="indent">拉夏贝尔旗下品牌女鞋专场</span>
                    </h1>
                    <div class="right">
                        <img src="./images/倒计时.png" alt="" class="time">
                        <div>剩2天</div>
                    </div>
                </div>
            </li>
        </ul>
        <div class="btn">
            <button>逛更多鞋包品牌
                <img src="./images/右箭头.png" alt="">
            </button>
        </div>
    </section>
</body>
<script src="./js/jquery-3.5.1.min.js"></script>
<script src="./js/index.js"></script>

</html>